import {useState} from "react";
import {history} from "umi";
import {Button, CalendarPicker, Card, Form, Input, Picker, Selector, Toast} from "antd-mobile";
import {AddOutline, DeleteOutline} from "antd-mobile-icons";

import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';


const Travel = () => {
    const [form] = Form.useForm();
    const [dateVisable, setDateVisable] = useState(false);
    const [startDate, setStartDate] = useState();

    const cloumns = [
        [
            {label: '火车', value: '1'},
            {label: '飞机', value: '2'},
        ]
    ]
    return (
        <div>
            <Card
                title={
                    <div style={{fontWeight: 'normal', fontSize: 10}}>
                        行程1
                    </div>
                }
                extra={<DeleteOutline/>}
                // onBodyClick={onBodyClick}
                // onHeaderClick={onHeaderClick}
                style={{borderRadius: '16px'}}
            >
                <Form requiredMarkStyle='asterisk' mode="default" form={form}>
                    <Form.Item name='applyOrg' label='交通工具' rules={[{required: true}]} onClick={async () => {
                        const value = await Picker.prompt({
                            columns: basicColumns,
                        })
                        Toast.show(`你选择了 ${value}`)
                    }}>
                        <Input placeholder='请选择所属组织' value="" readOnly/>
                    </Form.Item>
                    <Form.Item name='feeType' value={startDate} label='开始日期' rules={[{required: true}]} onClick={() => {
                        setDateVisable(true)
                    }}>
                        <Input type="text" placeholder={startDate} defaultValue={startDate}/>
                    </Form.Item>
                    <CalendarPicker
                        visible={dateVisable}
                        selectionMode='single'
                        onClose={() => {
                            setDateVisable(false)
                        }}
                        onMaskClick={() => {
                            setDateVisable(true)
                        }}
                        onConfirm={(val) => {
                            console.log(val)
                            if (null != val) {
                                setStartDate(dayjs(val).format("YYYY-MM-DD"));
                            }
                        }}
                        onChange={() => {
                        }}
                    />
                    <Form.Item name='feeType' value={startDate} label='結束日期' rules={[{required: true}]} onClick={() => {
                        setDateVisable(true)
                    }}>
                        <Input type="text" placeholder={startDate} defaultValue={startDate}/>
                    </Form.Item>
                    <CalendarPicker
                        visible={dateVisable}
                        selectionMode='single'
                        onClose={() => {
                            setDateVisable(false)
                        }}
                        onMaskClick={() => {
                            setDateVisable(true)
                        }}
                        onConfirm={(val) => {
                            console.log(val)
                            if (null != val) {
                                setStartDate(dayjs(val).format("YYYY-MM-DD"));
                            }
                        }}
                        onChange={() => {
                        }}
                    />
                    <Form.Item name='feeType' value={startDate} label='行程天数' rules={[{required: true}]}>
                        <Input type="number"/>
                    </Form.Item>

                    <Form.Item name='feeType' value={startDate} label='出发城市' rules={[{required: true}]} onClick={() => {
                        history.push("/index/city");
                    }}>
                        <Input type="text" placeholder={startDate} defaultValue={startDate}/>
                    </Form.Item>

                    <Form.Item name='feeType' value={startDate} label='目的城市' rules={[{required: true}]} onClick={() => {
                        history.push("/index/city");
                    }}>
                        <Input type="text" placeholder={startDate} defaultValue={startDate}/>
                    </Form.Item>
                    <Form.Item name='feeType' label='单程/往返' rules={[{required: true}]}>
                        <Selector
                            options={[{value: "1", label: "单程"}, {value: "2", label: "往返"}]}
                            defaultValue={['1']}
                            onChange={(arr, extend) => console.log(arr, extend.items)}
                        />
                    </Form.Item>
                </Form>
                <>
                    <Button size="small" block={true} fill="none" style={{
                        '--text-color': "#1677FF"
                    }}><AddOutline/>增加行程</Button>
                </>
            </Card>
        </div>
    );
}

export default Travel;